<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model="xing" />
    <input type="text" v-model="ming" />
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>

    <h2>使用方法</h2>
    <p>{{ getName() }}</p>
    <p>{{ getName() }}</p>
    <p>{{ getName() }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '澈',
      ming: '澈澈'
    }
  },
  // 计算属性，要写到 和 data 平级的 computed 中
  computed: {
    // 所有的计算属性，都放到这里。【计算属性，必须返回计算的结果】
    fullName () {
      console.log('我可能喜欢上了')
      return this.xing + this.ming
    }
  },
  methods: {
    getName () {
      console.log('真的吗 算了吧')
      return this.xing + this.ming
    }
  }
}
</script>

<style></style>